<template>
  <div class="book-detail">
    <t-card :bordered="false" class="content-card">
      <template #title>
        <t-space size="24px">
          <h2 class="card-title">后台管理员</h2>
        </t-space>
      </template>
      <template #actions>
        <t-space size="8px">
          <t-button theme="primary" class="add-btn" @click="handleAdd">
            <p class="flex align-center">
              <icon-font name="add" size="12px" />新增管理员
            </p>
          </t-button>
        </t-space>
      </template>

      <div class="filter">
        <t-space size="12px">
          <t-select style="width: 140px;" v-model="params.status" :options="statusOptions" clearable placeholder="按用户状态" @change="getData">
            <template #label>
              <icon-font name="layers" style="color: #000;"/>
            </template>
          </t-select>
          <t-select style="width: 140px;" v-model="params.is_login" :options="loginOptions" clearable placeholder="按登录状态" @change="getData">
            <template #label>
              <icon-font name="layers" style="color: #000;"/>
            </template>
          </t-select>
          <t-input style="width: 220px;" v-model="params.key" placeholder="输入用户名称、关键字、ID" clearable @change="changeKey">
            <template #label>
              <icon-font name="search" size="16px" style="color:#000;font-weight: bold"/>
            </template>
          </t-input>
        </t-space>
      </div>

      <div class="pt16">
        <t-table
          rowKey="index"
          :data="lists"
          :columns="columns"
          :stripe="stripe"
          :bordered="bordered"
          :hover="hover"
          :size="size"
          :max-height="546"
          :table-layout="tableLayout ? 'auto' : 'fixed'"
          :showHeader="showHeader"
          cellEmptyContent="-"
          resizable
          :loading="loading"
          :pagination="pagination"
          @page-change="pageChange"
        >
          <template #avatar="{row}">
            <t-image-viewer v-if="row.avatar" :images="[row.avatar]" :closeOnEscKeydown="false">
              <template #trigger="{ open }">
                <div class="tdesign-demo-image-viewer__ui-image" @click="open">
                  <p class="prod-img">
                    <img alt="" :src="row.avatar"/>
                  </p>
                  <div class="tdesign-demo-image-viewer__ui-image--hover">
                    <span><browse-icon size="1.4em"/> </span>
                  </div>
                </div>
              </template>
            </t-image-viewer>
            <p v-else>-</p>
          </template>
          <template #phone_verify="{row}">
            <!--（-1 黑户；0 待审；1 已审）-->
            <t-tag v-if="row.phone_verify === 1" shape="round" variant="light" theme="success">已激活</t-tag>
            <t-tag v-if="row.phone_verify === 0" shape="round" variant="light" theme="warning">未激活</t-tag>
          </template>
          <template #is_login="{row}">
            <!--（-1 黑户；0 待审；1 已审）-->
            <t-tag v-if="row.is_login === 1" shape="round" variant="light" theme="success">允许</t-tag>
            <t-tag v-if="row.is_login === 0" shape="round" variant="light" theme="danger">禁止</t-tag>
          </template>
          <template #status="{row}">
            <!--（-1 黑户；0 待审；1 已审）-->
            <t-tag v-if="row.status === 1" shape="round" variant="light" theme="success">已审</t-tag>
            <t-tag v-if="row.status === 0" shape="round" variant="light" theme="warning">待审</t-tag>
            <t-tag v-if="row.status === -1" shape="round" variant="light" theme="danger">黑户</t-tag>
          </template>
          <template #option="{row}">
            <t-space size="12px">
              <t-link theme="primary" class="edit-btn-color" variant="outline" @click="handleEidt(row)">编辑</t-link>
              <!--<t-link theme="warning" class="opt-btn" variant="outline" @click="handleCopy(row)">复制</t-link>-->
              <t-popconfirm theme="danger" confirm-btn="删除" @confirm="handleDelete($event, row)">
                <template #content>
                  <div>
                    <h3 class="popconfirm-title">确认删除？</h3>
                    <p>删除后数据将不可以恢复！是否确认删除？</p>
                  </div>
                </template>
                <t-link theme="danger" class="opt-btn" variant="outline">删除</t-link>
              </t-popconfirm>
            </t-space>
          </template>
        </t-table>
      </div>
    </t-card>

    <!-- 添加管理员 -->
    <admin-add ref="add" @refresh="getData"></admin-add>
  </div>
</template>

<script lang="jsx">
import {IconFont, CalendarIcon, BrowseIcon} from "tdesign-icons-vue";
import IconUAV from "@/components/icon-UAV/index.vue";
import AdminAdd from "@/pages/other/admin/components/admin-add.vue";
import {adminDeleteApi, adminListApi} from "@/api/manager";

export default {
  name: 'Admin',
  components: {AdminAdd, IconUAV, IconFont, BrowseIcon},
  data() {
    return {
      params: {
        page: 1,  // 当前页
        limit: 10,  // 每页条数
        is_login: '',  // 允许登录：（0禁止；1允许）
        status: '', // 状态
        key: '',  // 关键字
      },
      statusOptions: [
        // -1 黑户；0 待审；1 已审
        {label: '已审', value: 1},
        {label: '待审', value: 0},
        {label: '黑户', value: -1},
      ],
      loginOptions: [
        // 0 禁止；1 允许
        {label: '允许', value: 1},
        {label: '禁止', value: 0},
      ],
      lists: [],
      size: 'medium',
      tableLayout: false,
      stripe: false,
      bordered: false,
      hover: true,
      showHeader: true,
      columns: [
        //{colKey: 'row-select', type: 'multiple', width: 50,},
        {colKey: 'id', title: 'ID', width: 80},
        {colKey: 'avatar', title: '头像', width: 100,},
        {colKey: 'real_name', title: '姓名', width: 120},
        {colKey: 'phone', title: '手机', width: 140,},
        {colKey: 'phone_verify', title: '是否激活', width: 100, align: 'center'},
        {colKey: 'is_login', title: '是否允许登录', width: 120, align: 'center'},
        {colKey: 'status', title: '状态', width: 100, align: 'center'},
        {colKey: 'login_count', title: '登录次数', width: 100, align: 'center'},
        {colKey: 'remark', title: '备注', ellipsis: true},
        {colKey: 'option', title: '操作', fixed: 'right', width: 100},
      ],
      pagination: {
        current: 1,
        pageSize: 10,
      },
      loading: true,
      timer: null
    };
  },
  mounted() {
    this.getData()
  },
  methods: {
    changeKey(value) {
      clearTimeout(this.timer)
      this.timer = setTimeout(()=> {
        this.getData()
      }, 500)
    },
    //前往添加用户
    handleAdd() {
      this.$refs.add.open('add');
    },
    // 编辑
    handleEidt(row) {
      this.$refs.add.open('edit', row)
    },
    // 复制
    handleCopy(row) {
      this.$refs.add.open('copy', row)
    },
    // 删除
    handleDelete(evt, row) {
      adminDeleteApi({id: row.id}).then(res=> {
        this.$message.success('删除成功')
        this.getList()
      }).catch(err=> {
        console.log('err', err)
      })
    },
    // 切换分页
    pageChange(pageInfo) {
      const { current, pageSize, } = pageInfo
      this.pagination.current = current
      this.pagination.pageSize = pageSize
      this.getList()
    },
    // 获取数据
    getData() {
      this.pagination.current = 1
      this.getList()
    },
    // 获取列表
    getList() {
      this.loading = true
      this.params.page = this.pagination.current
      this.params.limit = this.pagination.pageSize
      adminListApi(this.params).then(res=> {
        this.lists = res.data
        this.pagination.total = res.count
      }).catch(err=> {
      }).finally(()=> {
        this.loading = false
      })
    },
  },
}
</script>

<style lang="less" scoped>

.add-btn {
  border-radius: var(--td-radius-medium);
}

.book-detail {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: var(--td-radius-medium);
}

/deep/ .content-card {

  .t-card__header {
    padding: var(--td-comp-paddingTB-xl) var(--td-comp-paddingLR-xl);
    padding-bottom: 16px;
  }

  .t-card__body {
    padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-xl) var(--td-comp-paddingTB-m);
  }

  .card-title {
    font-size: 24px;
    font-weight: 600;
    line-height: 24px;
    text-align: left;
    color: #000000;
  }

  .setting-btn {
    font-size: 14px;
    font-weight: 400;
    line-height: 19.6px;
    text-align: left;
    color: #005687;
  }

  .invite-btn {
    font-size: 12px;
    font-weight: 400;
    line-height: 16.8px;
    text-align: left;
    color: #005687;

    background-color: #F3FBFF;
    border: 1px solid #005687;
    border-radius: var(--td-radius-default);
  }
}

/deep/ .action-btn {
  width: 126px;
  height: 42px;
  font-size: 16px;
  font-weight: 600;
  line-height: 22.4px;
  text-align: left;
  color: #FFFFFF;

  .t-button__text {
    display: flex;
    align-items: center;
    justify-content: center;

    i {
      z-index: 2;
      font-size: 12px;
      font-weight: bold;
      margin-right: 6px;

      &:after {
        position: absolute;
        display: inline-block;
        content: '';
        top: 50%;
        left: 50%;
        width: 14px;
        height: 14px;
        z-index: -1;
        background-color: #FFFFFF;
        border-radius: var(--td-radius-round);
        transform: translateX(-50%) translateY(-50%);
      }
    }
  }
}

.action-btn1 {
  background-color: #14A54E;
  border: 1px solid #14A54E;
  i {
    color: #14A54E;
  }
}

.action-btn2 {
  background-color: #FF5C46;
  border: 1px solid #DFE3E7;
}

.action-btn3 {
  background-color: #565656;
  border: 1px solid #DFE3E7;
}

.action-btn4 {
  color: black;
  background-color: #F9F9F9;
  border: 1px solid #E1E1E1;
}

.members {
  display: flex;
  gap: 12px;

  .member-list {
    //max-width: 600px;
    //overflow-x: auto;
    //overflow-y: hidden;
    display: flex;
    align-items: center;
    gap: 12px;

    //scrollbar-color: rgba(0, 0, 0, 0.1) #fcfcfc; /* 第一个颜色为滚动条的颜色， 第二个颜色为滚动条轨道的颜色 */
    //scrollbar-width: none; /* 直接设置滚动条的宽度，比如 60px 3vh 4wh 5rem 6rm 等长度 */
    //
    //::-webkit-scrollbar {
    //  width: 6px;
    //  height: 6px;
    //  border-radius: 100px;
    //  background-color: #fcfcfc;
    //}
    //
    //::-webkit-scrollbar-thumb {
    //  background-color: rgba(0, 0, 0, 0.1);
    //  border-radius: 100px;
    //}
    //
    //::-webkit-scrollbar-track {
    //  background-color: transparent;
    //}
  }

  .member-item {
    //width: 100px;
    flex-shrink: 0;
    padding: 6px 12px;
    padding-right: 33px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;

    .body-wrap {
      position: relative;
      padding-bottom: 20px;

      .num {
        position: absolute;
        top: 0;
        right: 0;
        font-size: 12px;
        font-weight: 700;
        line-height: 13.97px;
        text-align: left;
        color: #00000099;
        transform: translateX(100%);
      }
    }

    .body {
      opacity: 0.4;
      display: flex;
      align-items: center;

    }

    .avatar {
      width: 30px;
      height: 30px;
      overflow: hidden;
      margin-right: 6px;
      border-radius: var(--td-radius-round);

      img {
        width: 100%;
        height: 100%;
      }
    }

    h3 {
      font-size: 18px;
      font-weight: 400;
      line-height: 25.2px;
      text-align: left;
      color: #000000;
    }
  }

  .active-member {
    position: relative;

    .body {
      opacity: 1;
    }

    h3 {
      font-weight: 600;
    }

    &:after {
      position: absolute;
      content: '';
      left: 50%;
      right: 0;
      bottom: 0;
      width: 140%;
      height: 6px;
      transform: translateX(-50%) translateY(-100%);
      background-color: #FF5C46;
      border-radius: var(--td-radius-round);
    }
  }
}

/deep/ .filter {
  padding-top: 0px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .t-input, .t-input.t-is-readonly {
    background-color: #F8F8F8;
  }
}

.import-btn {
  width: 69px;
  color: #000000;
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  background-color: #F9F9F9;
  border: 1px solid #E1E1E1;
}

.user {
  display: flex;
  align-items: center;

  .avatar {
    width: 26px;
    height: 26px;
    margin-right: 6px;

    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }
}

.income {
  color: #14A54E;
  display: flex;
  align-items: center;

  i {
    width: 17px;
    height: 17px;
    color: #FFFFFF;
    font-size: 12px;
    display: flex;
    margin-left: 8px;
    align-items: center;
    justify-content: center;
    background-color: #14A54E;
    border-radius: var(--td-radius-small);
  }
}

.expenditure {
  color: #FF5C46;
  display: flex;
  align-items: center;

  i {
    width: 17px;
    height: 17px;
    color: #FFFFFF;
    font-size: 12px;
    display: flex;
    margin-left: 8px;
    align-items: center;
    justify-content: center;
    background-color: #FF5C46;
    border-radius: var(--td-radius-small);
  }
}

.footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #F9F9F9;
  padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-xl);
  padding-right: var(--td-comp-paddingLR-xxl);
}
</style>
